
<template>
    <div class="add">
      <div class="hot">
         <div class="top">
            <div><p>添加活动</p></div>
            <div class="close" @click="closeDiv">x</div>
         </div>

        <div class="addList"  >
            <div><span>活动名称</span><input type="text" v-model="shopName"  placeholder="请输入活动名称"></div>
            <!-- 订单号 -->
            <div><span>订  单  号</span><span class="numer">{{this.orderCode}}</span></div>
            <div><span>活动类型</span><input type="text" v-model="shopType" placeholder="请输入活动类型"></div>
            <div><span>活动院校</span><input type="text" v-model="collage" placeholder="请用户名/手机号登录"></div>
            <div><span>活动价格</span><input type="text" v-model="price" placeholder="请输入价格"></div>
            <div><span>开始时间</span><input type="datetime-local"  v-model="startTime" placeholder="请选择开始时间"></div>
            <div><span>结束时间</span><input type="datetime-local"  v-model="endTime" placeholder="请选择结束时间"></div>
        </div>
        <div class="btn">
           <button @click="addHot()">确定</button>
           <button>取消</button>
        </div>
      </div>
    </div>
</template>

<script>
import {request} from '../../server_Api'
export default {
  data(){
    return {
      // id
      Sid:this.getSid,
      // 名称
      shopName:"",
      // 订单号
      shopNum:this.orderCode,
      shopType:"",
      collage:"",
      startTime:"",
      endTime:"",
      stuAuth:"0",
      price:"",
      startNegotiateModel: {
          projectId: "", //项目id
          startTime: "", //项目开始时间
          endTime: "", //项目结束时间
          negotiateContent: "" //开始协商内容
      },
    }
  },
  created(){
    console.log(this.getNowDate,12312);
  },
  methods:{
    // 添加活动
    addHot(){
      let obj = {
        Sid:this.getSid,
        shopName:this.shopName,
        shopNum:this.orderCode,
        shopType:this.shopType,
        collage:this.collage,
        price:this.price,
        startTime:this.startTime,
        endTime:this.endTime,
        stuAuth:this.stuAuth
      }
      console.log(obj,"obj");
      request({
         url:"/pc_addHot",
         method: "POST",
         data:obj
      }).then((res)=>{
       if(res.data.code == "01"){
         location.reload()
       }
      })
      this.$emit("close", false);
      this.$router.history.go(0)
    },
     closeDiv(){
      this.$emit('close',false)
    }
  },
   computed: {
    //  随机生成Sid
     getSid(){
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0,
              v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
     },
    //  订单号 时间戳生成 不会重复
    orderCode() {
        var orderCode='';
        for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
        {
          orderCode += Math.floor(Math.random() * 10);
        }
        orderCode = new Date().getTime() + orderCode;  //时间戳，用来生成订单号。
        console.log(orderCode)
        return orderCode;
    },
    // 获取当前时间
    getNowDate() {
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        var hours = myDate.getHours(); //获取当前小时
        var minutes = myDate.getMinutes(); //获取当前分钟
        var seconds = myDate.getSeconds(); //获取当前秒
        var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
        return now;
    },
   },
}
</script>

<style scoped>
  .add{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 200;
  }
  .hot{
    width: 30%;
    height: 74%;
    background: #fff;
    margin: 8% auto;
    border-radius: 10px;
    text-align: left;
  }
  .hot .top{
    display: flex;
    margin: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 40px 10px 10px 20px;
  }
.hot .top div:first-of-type {
  font-size: 20px;
  color: #2897ff;
  font-weight: 500;
}
.hot .top div:last-of-type {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
  border-radius: 50%;
}
.addList{
 padding: 0 20px 0 40px;
}
.addList div:first-of-type {
  color: #2897ff;
}
.addList div {
  margin-top: 30px;
}
.addList div input {
  margin-left: 20px;
  height: 30px;
  width: 210px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  text-indent: 10px;
  font-size: 14px;
  outline: none;
}
.addList span{
    margin-left: 20px;
}
.addList span {
  color: rgba(0, 0, 0, 0.5);
}
.addList div .numer{
  color:#2897ff;
}
.btn {
  padding: 40px 40px;
  text-align: right;
}
.btn button {
  background: none;
  border: none;
  outline: none;
  padding: 8px 16px;
  margin-left: 20px;
  font-weight: 600;
}
.btn button:first-of-type {
  background: #2897ff;
  color: #fff;
  font-weight: 500;
  border-radius: 4px;
}
.btn button:nth-child(2) {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
}
</style>
